<template>
  <div class="client-add">
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    </pageHeader>
    <div class="base-info">
      <TitleBox title="基本消息"></TitleBox>
      <div class="base-info-header">
        <a-form style="width: 60%" :model="taskData" auto-label-width>
          <a-row :gutter="24" justify="space-between">
            <a-col :span="11">
              <a-form-item field="posts.post2" label="销售出库单号:"
                ><a-input
                  style="width: 320px"
                  placeholder="系统自动生成"
                  disabled
                  v-model="form.number"
              /></a-form-item>
            </a-col>
            <a-col :span="11">
              <a-form-item field="posts.post2" label="关联销售订单号：">
                <a-input
                  style="width: 320px"
                  placeholder="系统自动生成"
                  disabled
                  v-model="form.orderNumber"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24" justify="space-between">
            <a-col :span="11">
              <a-form-item field="posts.post2" label="出库单下达时间："
                ><a-date-picker
                  placeholder="系统自动生成"
                  :style="{ width: '320px' }"
                  disabled
                  v-model="form.CreatedAt"
              /></a-form-item>
            </a-col>
            <a-col :span="11">
              <a-form-item field="posts.post2" label="客户名称："
                ><a-input
                  :style="{ width: '320px' }"
                  v-model="form.clientCompanyName"
                  disabled
                  allow-clear
              /></a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24" justify="space-between">
            <a-col :span="11">
              <a-form-item field="posts.post2" label="业务员：">
                <a-input
                  :style="{ width: '320px' }"
                  v-model="form.userStaffName"
                  disabled
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="11">
              <a-form-item field="posts.post2" label="收货人：">
                <a-input
                  :style="{ width: '320px' }"
                  v-model="form.consigneeName"
                  placeholder="无"
                  allow-clear
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24" justify="space-between">
            <a-col :span="11">
              <a-form-item field="posts.post2" label="收货人联系电话：">
                <a-input
                  :style="{ width: '320px' }"
                  v-model="form.consigneePhone"
                  placeholder="无"
                  allow-clear
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col :span="11">
              <a-form-item field="posts.post2" label="送货地址：">
                <a-input
                  v-model="form.consigneeAddress"
                  :style="{ width: '320px' }"
                  placeholder="无"
                  allow-clear
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24" justify="space-between">
            <a-col :span="11">
              <a-form-item field="posts.post2" label="计划出货时间：">
                <a-date-picker
                  v-model="form.outboundDate"
                  :style="{ width: '320px' }"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24" justify="space-between">
            <a-col :span="24">
              <a-form-item field="posts.post2" label="备注：">
                <a-textarea disabled v-model="form.remark" allow-clear />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <TitleBox title="物料出库明细"></TitleBox>
      <div class="base-info-header">
        <tableTurn
          style="padding: 0 50px; width: 100%"
          :table-data="getProduct"
          :ref="tableRef"
          :pagination="false"
          :args="args"
        >
          <a-table-column :width="80" align="center">
            <template #title> 序号 </template>
            <template #cell="{ rowIndex }">
              <div style="position: relative">
                <div>{{ rowIndex + 1 }}</div>
              </div>
            </template>
          </a-table-column>
          <a-table-column
            align="center"
            :width="80"
            title="物料编码"
            data-index="productNumber"
          >
          </a-table-column>
          <a-table-column
            align="center"
            :width="80"
            title="物料名称"
            data-index="productName"
          >
          </a-table-column>

          <a-table-column
            align="center"
            :width="80"
            title="规格型号"
            data-index="spec"
          >
          </a-table-column>

          <a-table-column
            align="center"
            :width="80"
            title="订单数量"
            data-index="amount"
          >
          </a-table-column>

          <a-table-column
            align="center"
            :width="80"
            title="本次出库数量"
            data-index="amounts"
          >
            <template #cell="{ record }">
              <a-input-number
                :min="1"
                disabled
                :max="record.amount"
                v-model="record.itemAmount"
              />
            </template>
          </a-table-column>
        </tableTurn>
      </div> </div
  ></div>

  <!-- <div>
      <div class="info-item">
        <div style="width: 100%; display: flex; margin: 20px 50px">
          <a-space>
            <div
              style="
                width: 4px;
                height: 15px;
                background-color: rgba(61, 126, 255, 1);
                border: none;
                border-radius: 2px;
              "
            >
            </div>
            <h3>基本信息</h3>
          </a-space>
        </div>
        <div style="width: 100%; display: flex; justify-content: center"
          ><a-form style="width: 60%" :model="taskData" auto-label-width>
            <a-row :gutter="24" justify="space-between">
              <a-col :span="11">
                <a-form-item field="posts.post2" label="销售出库单号:"
                  ><a-input
                    style="width: 320px"
                    placeholder="系统自动生成"
                    disabled
                    v-model="form.number"
                /></a-form-item>
              </a-col>
              <a-col :span="11">
                <a-form-item field="posts.post2" label="关联销售订单号：">
                  <a-input
                    style="width: 320px"
                    placeholder="系统自动生成"
                    disabled
                    v-model="form.orderNumber"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" justify="space-between">
              <a-col :span="11">
                <a-form-item field="posts.post2" label="出库单下达时间："
                  ><a-date-picker
                    placeholder="系统自动生成"
                    :style="{ width: '320px' }"
                    disabled
                    v-model="form.CreatedAt"
                /></a-form-item>
              </a-col>
              <a-col :span="11">
                <a-form-item field="posts.post2" label="客户名称："
                  ><a-input
                    :style="{ width: '320px' }"
                    v-model="form.clientCompanyName"
                    disabled
                    allow-clear
                /></a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" justify="space-between">
              <a-col :span="11">
                <a-form-item field="posts.post2" label="业务员：">
                  <a-input
                    :style="{ width: '320px' }"
                    v-model="form.userStaffName"
                    disabled
                    allow-clear
                  />
                </a-form-item>
              </a-col>
              <a-col :span="11">
                <a-form-item field="posts.post2" label="收货人：">
                  <a-input
                    :style="{ width: '320px' }"
                    v-model="form.consigneeName"
                    placeholder="无"
                    allow-clear
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" justify="space-between">
              <a-col :span="11">
                <a-form-item field="posts.post2" label="收货人联系电话：">
                  <a-input
                    :style="{ width: '320px' }"
                    v-model="form.consigneePhone"
                    placeholder="无"
                    allow-clear
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col :span="11">
                <a-form-item field="posts.post2" label="送货地址：">
                  <a-input
                    v-model="form.consigneeAddress"
                    :style="{ width: '320px' }"
                    placeholder="无"
                    allow-clear
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" justify="space-between">
              <a-col :span="11">
                <a-form-item field="posts.post2" label="计划出货时间：">
                  <a-date-picker
                    v-model="form.outboundDate"
                    :style="{ width: '320px' }"
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" justify="space-between">
              <a-col :span="24">
                <a-form-item field="posts.post2" label="备注：">
                  <a-textarea disabled v-model="form.remark" allow-clear />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div style="width: 100%; display: flex; margin: 20px 50px">
          <a-space>
            <div
              style="
                width: 4px;
                height: 15px;
                background-color: rgba(61, 126, 255, 1);
                border: none;
                border-radius: 2px;
              "
            >
            </div>
            <a-space :size="50"><h3>物料出库明细</h3></a-space>
          </a-space>
        </div>
        <div
          style="
            width: 90%;
            margin-left: 5%;
            box-shadow: 1px 1px 5px rgb(153 153 153 / 35%);
            border-radius: 4px;
          "
        >
          <div style="padding: 30px">
            <div style="text-align: right" class="button-item"></div
            ><tableTurn
              style="margin-top: 10px"
              :table-data="getProduct"
              :ref="tableRef"
              :pagination="false"
              :args="args"
            > 
              <a-table-column :width="80" align="center">
                <template #title> 序号 </template>
                <template #cell="{ rowIndex }">
                  <div style="position: relative">
                    <div>{{ rowIndex + 1 }}</div>
                  </div>
                </template>
              </a-table-column>
              <a-table-column
                align="center"
                :width="80"
                title="物料编码"
                data-index="productNumber"
              >
              </a-table-column>
              <a-table-column
                align="center"
                :width="80"
                title="物料名称"
                data-index="productName"
              >
              </a-table-column>

              <a-table-column
                align="center"
                :width="80"
                title="规格型号"
                data-index="spec"
              >
              </a-table-column>

              <a-table-column
                align="center"
                :width="80"
                title="订单数量"
                data-index="amount"
              >
              </a-table-column>

              <a-table-column
                align="center"
                :width="80"
                title="本次出库数量"
                data-index="amounts"
              >
                <template #cell="{ record }">
                  <a-input-number
                    :min="1"
                    disabled
                    :max="record.amount"
                    v-model="record.itemAmount"
                  />
                </template>
              </a-table-column> </tableTurn
          ></div>
        </div>
      </div>
    </div>
  </div> -->

  <!-- <div v-if="form.state === 1" class="box">
    <a-space :size="20">
      <a-button type="primary" @click="submit">
        <template #default>确认</template>
      </a-button>
    </a-space>
  </div> -->
</template>

<script lang="ts" setup>
  import {
    reactive,
    ref,
    computed,
    onMounted,
    defineAsyncComponent,
  } from 'vue';
  import { useRoute, useRouter } from 'vue-router';

  import {
    getOutboundDetails,
    putOutboundConfirm,
  } from '@/api/inventory-management/outbound-management/sales-shipment-outbound/sales-outbound/index';
  import { cloneDeep } from 'lodash';
  import { Message } from '@arco-design/web-vue';
  import { useOrderStore } from '@/store';

  const OrderStore = useOrderStore();
  //   import SelectDetail from './select-detail/index.vue';

  const router = useRouter();
  const route = useRoute();
  const tableRef = ref();
  const title: string = '出库单详情';
  const breadCrumb: string[] = [
    '库存管理',
    '出库管理',
    '销售发货出库',
    '出库单详情',
  ];
  const ids = Number(route.query.id);
  const form = ref<any>({
    number: '',
    orderId: undefined,
    outboundType: 1,
    warehouseStaffId: undefined,
    inspectionStaffId: undefined,
    consigneeName: '',
    consigneePhone: '',
    consigneeAddress: '',
    outboundDate: '',
    remark: '',
    state: 1,
    OutboundWarehouseItem: [],
    salesOrderNumber: undefined,
    clientCompanyName: '',
    clientCompanyId: undefined,
    userStaffName: '',
    userStaffId: undefined,
  });

  // 表格配置
  const args = reactive({
    stripe: false,
    scroll: {
      y: 2000,
      x: 500,
    },
    bordered: {
      headerCell: true,
    },
    rowKey: 'id', // 批量选择按钮 以合同名称来作为key
  });

  const getProduct = async () => {
    try {
      const res = await getOutboundDetails({ id: ids });
      form.value = res;
      return Promise.resolve(form.value.OutboundWarehouseItem);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  const submit = async () => {
    await putOutboundConfirm({ id: form.value.id });
    router.go(-1);
  };
</script>

<style scoped lang="less">
  .client-add {
    .base-info {
      padding: 10px 40px 10px 40px;

      .avatar {
        position: absolute;
        width: 100px;
      }
      &-header {
        // padding: 0 100px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        // :deep(.arco-form-item-content-flex) {
        //   display: block;
        //   line-height: 32px;
        //   color: #cccccc29;
        // }
      }

      &-extra {
        .contact-info,
        .invoice-info,
        .client-info,
        .remarks-info {
          padding: 0 100px;
        }
      }
    }
  }
</style>
